<!DOCTYPE html>
<html>
<head>
    <title>Physics Wave Propagation Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="200"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // --- Draw the x-axis ---
        const axisY = 120;
        const axisStartX = 50;
        const axisEndX = 450;
        const arrowSize = 10;

        // Draw the axis line
        ctx.beginPath();
        ctx.moveTo(axisStartX, axisY);
        ctx.lineTo(axisEndX, axisY);
        ctx.stroke();

        // Draw the arrowhead for the x-axis
        ctx.beginPath();
        ctx.moveTo(axisEndX, axisY);
        ctx.lineTo(axisEndX - arrowSize, axisY - arrowSize / 2);
        ctx.lineTo(axisEndX - arrowSize, axisY + arrowSize / 2);
        ctx.closePath();
        ctx.fill();

        // Draw the 'x' label
        ctx.font = "italic 22px Times New Roman";
        ctx.textAlign = "center";
        ctx.fillText("x", axisEndX + 15, axisY + 8);


        // --- Draw points A and B ---
        const tickHeight = 5;
        const posB = 180;
        const posA = 280;
        
        // Draw tick and label for B
        ctx.beginPath();
        ctx.moveTo(posB, axisY - tickHeight);
        ctx.lineTo(posB, axisY + tickHeight);
        ctx.stroke();
        ctx.font = "22px Times New Roman";
        ctx.fillText("B", posB, axisY + 30);
        
        // Draw tick and label for A
        ctx.beginPath();
        ctx.moveTo(posA, axisY - tickHeight);
        ctx.lineTo(posA, axisY + tickHeight);
        ctx.stroke();
        ctx.fillText("A", posA, axisY + 30);
        

        // --- Draw the velocity vector u ---
        const vectorY = 80;
        const vectorStartX = posA - 20; // Start slightly right of A's tick
        const vectorEndX = posB + 20;   // End slightly left of B's tick
        
        // Draw the vector line
        ctx.beginPath();
        ctx.moveTo(vectorStartX, vectorY);
        ctx.lineTo(vectorEndX, vectorY);
        ctx.stroke();

        // Draw the arrowhead for vector u (pointing left)
        ctx.beginPath();
        ctx.moveTo(vectorEndX, vectorY);
        ctx.lineTo(vectorEndX + arrowSize, vectorY - arrowSize / 2);
        ctx.lineTo(vectorEndX + arrowSize, vectorY + arrowSize / 2);
        ctx.closePath();
        ctx.fill();

        // Draw the 'u' label
        ctx.font = "italic 22px Times New Roman";
        const vectorCenterX = (vectorStartX + vectorEndX) / 2;
        ctx.fillText("u", vectorCenterX, vectorY - 15);

    </script>
</body>
</html>